<template>
  <div class="system">
    <div class="contain-header">
      <span>系统管理<i class="arrow"></i></span>
    </div>
    <div class="contain-body clearfix">
      <div class="top-div">
        <div class="el-button el-button--theme" style="margin: 0 10px 20px 0; float: right;" @click="userAdd">新增用户</div>
      </div>
      <div class="list-cont normal-shadow">
        <el-table :data="systemer" border style="width: 100%">
          <el-table-column prop="name" label="管理员" width="180"></el-table-column>
          <el-table-column prop="number" label="内部工号" width="180"></el-table-column>
          <el-table-column label="管理员权限">
            <template scope="scope">
              {{mapping(scope.row.jurisdiction, options, 'id', 'name')}}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template scope="scope">
              <el-button class="bj-btn" size="small" @click="editAdmin(scope.$index, scope.row)"><i class='glyphicon glyphicon-edit'></i></el-button>
              <el-button class="bj-btn" size="small" @click="deleteUser(scope.row.login_id)"><i class="glyphicon glyphicon-delete"></i></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!--新增用户-->
      <el-dialog title="新增用户" v-model="addFormVisible" style="width: 1000px;margin: 0 auto;" :close-on-click-modal="false">
        <el-form :model="addForm" label-width="80px" :rules="editFormRules" ref="addForm">
          <el-form-item label="管理员">
            <el-input v-model="addForm.name" ></el-input>
          </el-form-item>
          <el-form-item label="内部工号">
            <el-input v-model="addForm.number"></el-input>
          </el-form-item>
          <el-form-item label="管理员权限">
            <el-select v-model="addForm.jurisdiction" placeholder="请选择">
              <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="addForm.password" type="password" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input v-model="checkPassword" type="password" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="addFormVisible = false">取消</el-button>
          <el-button type="primary" @click.native="addSubmit" :loading="editLoading">添加</el-button>
        </div>
      </el-dialog>

      <!--编辑界面-->
      <el-dialog title="编辑" v-model="editFormVisible" style="width: 800px;margin: 0 auto;" :close-on-click-modal="false">
        <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
          <el-form-item label="管理员" prop="login_id">
            <el-input v-model="editForm.name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="内部工号">
            <el-input v-model="editForm.number" ></el-input>
          </el-form-item>
          <el-form-item label="管理员权限">
            <el-select v-model="editForm.jurisdiction" placeholder="请选择">
              <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="editForm.password" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input v-model="checkPassword" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="editFormVisible = false">取消</el-button>
          <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
        </div>
      </el-dialog>

      <!--分页-->
      <div class="pagination">
        <el-pagination
          @current-change="handleCurrentChange" :page-size="page" layout="prev, pager, next, jumper" :total="totalPage">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'system',
    data () {
      return {
        editFormRules: {
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ]
        },
        editForm: {name: '', number: '', manager: ''},
        // 新增界面数据
        addForm: {},
        options: [{id: 1, name: '管理员'}, {id: 2, name: '超级管理员'}],
        addFormVisible: false,
        editFormVisible: false,
        checkPassword: '',
        listLoading: false,
        editLoading: false,
        totalPage: 1,
        page: 1,
        params: {
          page: 1
        },
        systemer: []
      }
    },
    methods: {
      // 获取管理员列表
      getAdmins () {
        this.listLoading = true
        this.$http('get', 'admin', this.params)
          .then((data) => {
            this.listLoading = false
            this.systemer = data.result.dataList
            var total = data.result.total % 10 === 0 ? parseInt(data.result.total / 10) : parseInt(data.result.total / 10) + 1
            this.totalPage = total
          })
      },
      mapping (id, array, name1, name2) {
        let needName
        array.forEach(function (item) {
          if (item[name1] === id) {
            needName = item[name2]
            return
          }
        })
        return needName
      },
      handleCurrentChange (val) {
        this.params.page = val
        this.getAdmins()
      },
      // 显示新增界面
      userAdd: function () {
        this.addForm = {name: '', number: '', password: '', jurisdiction: ''}
        this.checkPassword = ''
        this.addFormVisible = true
      },
      // 显示编辑界面
      editAdmin: function (index, row) {
        this.editFormVisible = true
        this.checkPassword = ''
        this.editForm = Object.assign({}, row)
      },
      // 添加
      addSubmit: function () {
        if (this.checkPassword !== this.addForm.password) {
          this.$message({
            message: '两次输入的密码不相同哦',
            type: 'error'
          })
        } else if (this.addForm.password === ' ') {
          this.$message({
            message: '请输入密码',
            type: 'error'
          })
        } else {
          this.addLoading = true
          this.$http('post', 'admin', Object.assign(this.addForm, {number: this.addForm.login_id}))
            .then((data) => {
              this.addLoading = false
              this.$message({
                message: '提交成功',
                type: 'success'
              })
              this.$refs['addForm'].resetFields()
              this.addFormVisible = false
              this.getAdmins()
            })
        }
      },
      // 编辑
      editSubmit: function () {
        if (this.checkPassword !== this.editForm.password) {
          this.$message({
            message: '两次输入的密码不相同哦',
            type: 'error'
          })
        } else if (this.editForm.password === ' ') {
          this.$message({
            message: '请输入密码',
            type: 'error'
          })
        } else {
          this.editLoading = true
          this.$http('put', 'admin', this.editForm)
            .then((data) => {
              this.editLoading = false
              this.$message({
                message: '提交成功',
                type: 'success'
              })
              this.$refs['editForm'].resetFields()
              this.editFormVisible = false
              this.getAdmins()
            })
        }
      },
      // 删除
      deleteUser: function (loginId) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.listLoading = true
          this.$http('delete', 'admin', {login_id: loginId})
            .then((data) => {
              this.listLoading = false
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.getAdmins()
            })
        }).catch(() => {

        })
      }
    },
    mounted () {
      this.getAdmins()
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .top-div{
    overflow: hidden;
  }
  i{
    color: #58b5ff;
    font-size: 18px;
  }
  .bj-btn{
    border:0;
    width:19px;
    height:19px;
    padding: 0;
  }

</style>
